🌐 JavaScript Browser BOM

console.log("Chiều rộng:", window.innerWidth);
console.log("Chiều cao:", window.innerHeight);
console.log("Chiều rộng (bao gồm scrollbar):", window.outerWidth);
console.log("Chiều cao (bao gồm thanh công cụ):", window.outerHeight);

// Cách 1: Gán trực tiếp
location.href = "https://google.com";

// Cách 2: Sử dụng assign() (tương đương)
location.assign("https://google.com");

// Đều lưu trang hiện tại vào history (có thể back)

// Thay thế trang hiện tại (KHÔNG lưu trong history)
location.replace("https://example.com");

// Người dùng KHÔNG thể back về trang này
// Thường dùng cho: login redirect, error pages

// Tải lại trang (như nhấn F5)
location.reload();

// Tải lại trang từ server (bỏ qua cache)
location.reload(true);  // Deprecated trong HTML5

// Cách mới để force reload
location.reload(); // Browser tự quyết định cache

function loginSuccess() {
    // Chuyển hướng đến dashboard
    // Người dùng có thể back về trang login
    location.href = "/dashboard";
}

// Sử dụng:
if (userCredentials.isValid) {
    loginSuccess();
}

function sessionExpired() {
    // Thay thế trang hiện tại bằng login
    // KHÔNG cho phép back về trang cũ (bảo mật)
    location.replace("/login");
}

// Sử dụng:
if (sessionToken.isExpired()) {
    alert("Phiên đăng nhập đã hết hạn!");
    sessionExpired();
}

function refreshData() {
    // Tải lại trang để cập nhật dữ liệu mới
    location.reload();
}

// Sử dụng:
document.getElementById('refreshBtn').onclick = () => {
    if (confirm("Tải lại trang để cập nhật dữ liệu?")) {
        refreshData();
    }
};

function smartRedirect(url, options = {}) {
    const { 
        replaceHistory = false, 
        confirm = true,
        message = "Chuyển hướng đến trang mới?"
    } = options;
    
    if (confirm && !window.confirm(message)) {
        return false;
    }
    
    if (replaceHistory) {
        location.replace(url);
    } else {
        location.href = url;
    }
    
    return true;
}

// Sử dụng:
// Chuyển hướng thông thường
smartRedirect("/profile");

// Chuyển hướng không lưu history
smartRedirect("/login", { 
    replaceHistory: true,
    message: "Về trang đăng nhập?" 
});

// Quay lại trang trước
history.back();

// Tiến tới trang sau
history.forward();

// Di chuyển n trang (âm = quay lại, dương = tiến tới)
history.go(-2);  // Quay lại 2 trang
history.go(1);   // Tiến tới 1 trang

// Thêm state mới vào history (không tải lại trang)
history.pushState({page: 1}, "Title", "/page1");

// Thay thế state hiện tại
history.replaceState({page: 2}, "Title", "/page2");

// Thông tin cơ bản
console.log("User Agent:", navigator.userAgent);
console.log("Platform:", navigator.platform);
console.log("Ngôn ngữ:", navigator.language);
console.log("Trạng thái online:", navigator.onLine);

// Thông tin nâng cao  
console.log("Cookie enabled:", navigator.cookieEnabled);
console.log("Hardware concurrency:", navigator.hardwareConcurrency);
console.log("Max touch points:", navigator.maxTouchPoints);
console.log("Languages:", navigator.languages);

function detectLanguage() {
    const userLang = navigator.language || navigator.userLanguage;
    const supportedLangs = navigator.languages || [userLang];
    
    console.log("Ngôn ngữ chính:", userLang);
    console.log("Danh sách ngôn ngữ:", supportedLangs);
    
    // Chọn ngôn ngữ phù hợp cho website
    if (userLang.startsWith('vi')) {
        return 'vietnamese';
    } else if (userLang.startsWith('en')) {
        return 'english';
    } else {
        return 'english'; // Default
    }
}

function detectDeviceCapabilities() {
    // Thu thập thông tin từ browser APIs
    const info = {
        isMobile: navigator.maxTouchPoints > 0,
        cpuCores: navigator.hardwareConcurrency || 'Unknown',
        platform: navigator.platform || 'Unknown',
        memoryGB: navigator.deviceMemory || 'N/A', // Chỉ Chrome/Edge
        userAgent: navigator.userAgent
    };
    
    // ⚠️ LƯU Ý QUAN TRỌNG:
    // Browser KHÔNG trả về thông tin hardware chính xác 100%
    // Ví dụ: Máy M4 Pro RAM 24GB có thể chỉ hiện 8GB hoặc N/A
    // Lý do: Privacy protection và security policies
    
    let platformDesc = 'Unknown';
    if (info.platform.includes('Mac')) {
        platformDesc = 'macOS';
        // Phát hiện Apple Silicon (M1, M2, M3, M4...)
        if (!info.userAgent.includes('Intel')) {
            platformDesc = 'macOS (Apple Silicon)';
        }
    }
    
    // KHUYẾN NGHỊ: Sử dụng feature detection thay vì hardware detection
    // ✅ Responsive design > device detection
    // ✅ Performance testing > specs checking
    
    return { platformDesc, ...info };
}

function setupOfflineMode() {
    // Kiểm tra trạng thái ban đầu
    updateConnectionStatus();
    
    // Lắng nghe sự kiện thay đổi kết nối
    window.addEventListener('online', () => {
        console.log("🌐 Đã kết nối internet");
        syncOfflineData(); // Đồng bộ dữ liệu offline
    });
    
    window.addEventListener('offline', () => {
        console.log("🔌 Mất kết nối internet");
        enableOfflineMode(); // Chuyển sang chế độ offline
    });
}

// Lấy vị trí hiện tại
navigator.geolocation.getCurrentPosition(
    function(position) {
        console.log("Latitude:", position.coords.latitude);
        console.log("Longitude:", position.coords.longitude);
        console.log("Accuracy:", position.coords.accuracy);
    },
    function(error) {
        console.log("Lỗi:", error.message);
        // Error codes:
        // 1: PERMISSION_DENIED
        // 2: POSITION_UNAVAILABLE  
        // 3: TIMEOUT
    },
    {
        enableHighAccuracy: true,
        timeout: 10000,
        maximumAge: 60000
    }
);

// Kích thước màn hình vật lý
console.log("Độ phân giải màn hình:", screen.width + "x" + screen.height);

// Vùng làm việc (trừ taskbar)
console.log("Vùng làm việc:", screen.availWidth + "x" + screen.availHeight);

// Thông tin màu sắc
console.log("Độ sâu màu:", screen.colorDepth + " bits");
console.log("Độ sâu pixel:", screen.pixelDepth + " bits");

// Thông tin hướng màn hình (mobile)
console.log("Hướng màn hình:", screen.orientation?.type);
console.log("Góc xoay:", screen.orientation?.angle + "°");

function getScreenCategory() {
    const width = screen.width;
    const height = screen.height;
    
    // Phân loại theo độ phân giải
    if (width >= 3840 && height >= 2160) {
        return "4K Ultra HD (3840x2160+)";
    } else if (width >= 2560 && height >= 1440) {
        return "2K/QHD (2560x1440+)";
    } else if (width >= 1920 && height >= 1080) {
        return "Full HD (1920x1080+)";
    } else if (width >= 1366 && height >= 768) {
        return "HD (1366x768+)";
    } else {
        return "Low Resolution";
    }
}

function analyzeColorCapability() {
    const colorDepth = screen.colorDepth;
    const pixelDepth = screen.pixelDepth;
    
    let colorInfo = {
        depth: colorDepth,
        totalColors: Math.pow(2, colorDepth),
        quality: ""
    };
    
    if (colorDepth >= 32) {
        colorInfo.quality = "Excellent (True Color + Alpha)";
    } else if (colorDepth >= 24) {
        colorInfo.quality = "Very Good (True Color)";
    } else if (colorDepth >= 16) {
        colorInfo.quality = "Good (High Color)";
    } else {
        colorInfo.quality = "Limited (256 colors or less)";
    }
    
    return colorInfo;
}

function setupOrientationTracking() {
    // Kiểm tra hỗ trợ orientation
    if (screen.orientation) {
        console.log("Hướng hiện tại:", screen.orientation.type);
        console.log("Góc xoay:", screen.orientation.angle);
        
        // Lắng nghe thay đổi orientation
        screen.orientation.addEventListener('change', () => {
            console.log("Orientation changed to:", screen.orientation.type);
            updateLayoutForOrientation();
        });
    }
}

function compareScreenVsWindow() {
    const comparison = {
        screen: {
            total: \`\${screen.width}x\${screen.height}\`,
            available: \`\${screen.availWidth}x\${screen.availHeight}\`
        },
        window: {
            inner: \`\${window.innerWidth}x\${window.innerHeight}\`,
            outer: \`\${window.outerWidth}x\${window.outerHeight}\`
        },
        taskbarSize: {
            horizontal: screen.width - screen.availWidth,
            vertical: screen.height - screen.availHeight
        }
    };
    
    return comparison;
}